<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const classId = route.params.id;
const studentData = ref([]);

// 模拟获取班级学员数据（替换为您的实际 API）
async function fetchStudents() {
  try {
    // 替换为实际 API，例如：const res = await getStudentsByClassId(classId);
    const res = {
      code: 200,
      data: [
        { id: 1, name: '张三', studentId: 'S001', status: '在读' },
        { id: 2, name: '李四', studentId: 'S002', status: '休学' },
      ],
    };
    console.log('班级学员响应:', res);
    if (res.code === 200) {
      studentData.value = res.data;
    } else {
      ElMessage.error(`获取班级学员失败: ${res.message || '未知错误'}`);
    }
  } catch (error) {
    console.error('获取班级学员失败:', error);
    ElMessage.error('获取班级学员失败，请稍后重试');
  }
}

onMounted(() => {
  if (classId) {
    console.log('Students 页面挂载，classId:', classId);
    fetchStudents();
  }
});
</script>

<template>
  <div>
    <el-table :data="studentData" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名" width="150" />
      <el-table-column prop="studentId" label="学号" width="150" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <span :class="row.status === '在读' ? 'text-green-600' : 'text-yellow-600'">
            {{ row.status }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default>
          <el-button type="primary" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

.el-table :deep(.el-table__row--striped) {
  background-color: #f9fafb;
}
</style>